<template>
  <div>
    <div style="margin-bottom: 10px;text-align: right;">
      账期
      <el-date-picker v-model="balanceMonth" size="mini" type="month"
                      value-format="yyyy-MM"
                      placeholder="选择月" style="width: 120px;" @change="handleBalanceMonthChange"/>
      <el-button type="primary" size="mini" style="margin-left: 10px;" @click="handleWaterBalanceEdit">录入/编辑
      </el-button>
      <el-button type="danger" size="mini" @click="handleCalculateZoneWaterBalanceFix">重新运算</el-button>
    </div>

    <el-descriptions title="基础信息" :column="2" border size="mini" style="margin-bottom: 10px;">
      <!--      <el-descriptions-item label="分区编号" :labelStyle="customLabelStyle">-->
      <!--        {{ editingZoneObj ? editingZoneObj.areaId : '' }}-->
      <!--      </el-descriptions-item>-->
      <el-descriptions-item label="分区名称" :labelStyle="customLabelStyle">
        {{ editingZoneObj ? editingZoneObj.areaName : '' }}
      </el-descriptions-item>
      <el-descriptions-item label="水平衡账期" :labelStyle="customLabelStyle">
        {{ balanceMonth }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="供水总量" :column="3" border size="mini" style="margin-bottom: 10px;">
      <el-descriptions-item label="自产供水量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('selfflow') }}
      </el-descriptions-item>
      <el-descriptions-item label="外购供水量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('buyflow') }}
      </el-descriptions-item>
      <el-descriptions-item label="供水总量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('totalflow') }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="注册用户用水量" :column="3" border size="mini" style="margin-bottom: 10px;">
      <el-descriptions-item label="计费计量用水量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('chargeflowJl') }}
      </el-descriptions-item>
      <el-descriptions-item label="计费未计量用水量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('chargeflowWjl') }}
      </el-descriptions-item>
      <el-descriptions-item label="免费计量用水量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('freeflowJl') }}
      </el-descriptions-item>
      <el-descriptions-item label="免费未计量用水量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('freeflowWjl') }}
      </el-descriptions-item>
      <el-descriptions-item label="注册用户用水量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('userflow') }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="漏失水量" :column="3" border size="mini" style="margin-bottom: 10px;">
      <el-descriptions-item label="明漏水量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('mleakage') }}
      </el-descriptions-item>
      <el-descriptions-item label="暗漏水量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('aleakage') }}
      </el-descriptions-item>
      <el-descriptions-item label="背景漏损水量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('backleakage') }}
      </el-descriptions-item>
      <el-descriptions-item label="水箱、水池的渗漏和流溢水量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('sleakage') }}
      </el-descriptions-item>
      <el-descriptions-item label="漏失水量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('totalleakage1') }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="漏损水量" :column="3" border size="mini" style="margin-bottom: 10px;">
      <el-descriptions-item label="居民用户总分表差损失水量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('jleakage') }}
      </el-descriptions-item>
      <el-descriptions-item label="非居民用户表具误差损失水量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('fleakage') }}
      </el-descriptions-item>
      <el-descriptions-item label="计量损失水量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('cleakage') }}
      </el-descriptions-item>
      <el-descriptions-item label="未注册用户用水和用户拒查等管理因素导致的损失水量（m³）"
                            :labelStyle="customLabelStyle">{{ getWaterBalanceFixValue('wleakage') }}
      </el-descriptions-item>
      <el-descriptions-item label="漏损水量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('totalleakage2') }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="其他数据" :column="3" border size="mini" style="margin-bottom: 10px;">
      <el-descriptions-item label="居民抄表到户水量（m³）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('homeuserFlow') }}
      </el-descriptions-item>
      <el-descriptions-item label="最大冻土深度（米）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('depth') }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="计算结果" :column="3" border size="mini">
      <el-descriptions-item label="漏损率（%）" :labelStyle="customLabelStyle">{{
          getWaterBalanceFixValue('lxl')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="漏失率（%）" :labelStyle="customLabelStyle">{{
          getWaterBalanceFixValue('lsl')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="居民抄表到户水量修正值（%）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('updateHomeuser') }}
      </el-descriptions-item>
      <el-descriptions-item label="单位供水量管长修正值（%）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('updateBusiness') }}
      </el-descriptions-item>
      <el-descriptions-item label="年平均出厂压力修正值（%）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('updateYear') }}
      </el-descriptions-item>
      <el-descriptions-item label="最大冻土深度修正值（%）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('updateDepth') }}
      </el-descriptions-item>
      <el-descriptions-item label="修正漏损率（%）" :labelStyle="customLabelStyle">
        {{ getWaterBalanceFixValue('updateLsl') }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 添加或修改分区水平衡修正对话框 -->
    <el-dialog title="分区水平衡修正录入" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="260px">
        <el-row :gutter="10">
          <!--          <el-col :span="8">-->
          <!--            <el-form-item label="分区编号" prop="AreaID" label-width="120px">-->
          <!--              <el-input v-model="form.AreaID"/>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="12">
            <el-form-item label="分区名称" prop="areaName" label-width="120px" v-if="editingZoneObj">
              <el-input v-model="editingZoneObj.areaName" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="水平衡账期" prop="paydate" label-width="120px">
              <el-input v-model="form.paydate" readonly/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="自产供水量(m³)" prop="selfflow">-->
          <!--              <el-input-number v-model="form.selfflow" style="width: 100%;" placeholder="请输入"/>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="12">
            <el-form-item label="外购供水量(m³)" prop="buyflow">
              <el-input-number v-model="form.buyflow" style="width: 100%;" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计费未计量用水量(m³)" prop="chargeflowWjl">
              <el-input-number v-model="form.chargeflowWjl" style="width: 100%;" placeholder="请输入"/>
            </el-form-item>
          </el-col>
        </el-row>

        <!--        <el-row :gutter="10">-->
        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="计费计量用水量(m³)" prop="chargeflowJl">-->
        <!--              <el-input-number v-model="form.chargeflowJl" style="width: 100%;" placeholder="请输入"/>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->

        <!--        </el-row>-->

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="免费计量用水量(m³)" prop="freeflowJl">
              <el-input-number v-model="form.freeflowJl" style="width: 100%;" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="免费未计量用水量(m³)" prop="freeflowWjl">
              <el-input-number v-model="form.freeflowWjl" style="width: 100%;" placeholder="请输入"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="明漏水量(m³)" prop="mleakage">
              <el-input-number v-model="form.mleakage" style="width: 100%;" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="暗漏水量(m³)" prop="aleakage">
              <el-input-number v-model="form.aleakage" style="width: 100%;" placeholder="请输入"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="背景漏损水量(m³)" prop="backleakage">-->
          <!--              <el-input-number v-model="form.backleakage" style="width: 100%;" placeholder="请输入"/>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="12">
            <el-form-item label="水箱、水池的渗漏和流溢水量(m³)" prop="sleakage">
              <el-input-number v-model="form.sleakage" style="width: 100%;" placeholder="请输入"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="居民用户总分表差损失水量(m³)" prop="jleakage">
              <el-input-number v-model="form.jleakage" style="width: 100%;" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="非居民用户表具误差损失水量(m³)" prop="fleakage">
              <el-input-number v-model="form.fleakage" style="width: 100%;" placeholder="请输入"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="计量损失水量(m³)" prop="cleakage">
              <el-input-number v-model="form.cleakage" style="width: 100%;" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="未注册用户用水和用户拒查等管理因素导致的损失水量(m³)" prop="wleakage">
              <el-input-number v-model="form.wleakage" style="width: 100%;" placeholder="请输入"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="居民抄表到户水量(m³)" prop="homeuserFlow">-->
          <!--              <el-input-number v-model="form.homeuserFlow" style="width: 100%;" placeholder="请输入"/>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="12">
            <el-form-item label="最大冻土深度(m)" prop="depth">
              <el-input-number v-model="form.depth" style="width: 100%;" placeholder="请输入"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getZoneWaterBalance, updateRegionBalanceFix, doCalculateZoneWaterBalanceFix} from '@/api/leakage/zoneBalanceFix'
import moment from "moment/moment";

export default {
  name: "WaterBalanceFix",
  data() {
    return {
      balanceMonth: new moment().subtract(1, 'months').format('YYYY-MM'),
      customLabelStyle: {width: '23%', textAlign: 'right'},
      editingZoneObj: undefined,
      editingWaterBalanceFixObj: undefined,
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        selfflow: [
          {required: true, message: "自产供水量不能为空", trigger: "blur"}
        ],
        buyflow: [
          {required: true, message: "外购供水量不能为空", trigger: "blur"}
        ],
        chargeflowJl: [
          {required: true, message: "计费计量用水量不能为空", trigger: "blur"}
        ],
        chargeflowWjl: [
          {required: true, message: "计费未计量用水量不能为空", trigger: "blur"}
        ],
        freeflowJl: [
          {required: true, message: "免费计量用水量不能为空", trigger: "blur"}
        ],
        freeflowWjl: [
          {required: true, message: "免费未计量用水量不能为空", trigger: "blur"}
        ],
        mleakage: [
          {required: true, message: "明漏水量不能为空", trigger: "blur"}
        ],
        aleakage: [
          {required: true, message: "暗漏水量不能为空", trigger: "blur"}
        ],
        backleakage: [
          {required: true, message: "背景漏损水量不能为空", trigger: "blur"}
        ],
        sleakage: [
          {required: true, message: "水箱、水池的渗漏和流溢水量不能为空", trigger: "blur"}
        ],
        jleakage: [
          {required: true, message: "居民用户总分表差损失水量不能为空", trigger: "blur"}
        ],
        fleakage: [
          {required: true, message: "非居民用户表具误差损失水量不能为空", trigger: "blur"}
        ],
        cleakage: [
          {required: true, message: "计量损失水量不能为空", trigger: "blur"}
        ],
        wleakage: [
          {required: true, message: "未注册用户用水和用户拒查等管理因素导致的损失水量不能为空", trigger: "blur"}
        ],
        homeuserFlow: [
          {required: true, message: "居民抄表到户水量不能为空", trigger: "blur"}
        ],
        depth: [
          {required: true, message: "最大冻土深度不能为空", trigger: "blur"}
        ],
      }
    }
  },
  methods: {
    updateEditingZone(zone) {
      this.editingZoneObj = zone
      this.loadZoneWaterBalanceFixData()
    },
    loadZoneWaterBalanceFixData() {
      getZoneWaterBalance({areaID: this.editingZoneObj.areaId, paydate: this.balanceMonth}).then(res => {
        if (res.data) {
          this.editingWaterBalanceFixObj = res.data
          this.form = Object.assign({}, res.data)
        } else {
          this.editingWaterBalanceFixObj = undefined
          this.form = {}
        }
      })
    },
    openDialog() {
      this.open = true
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateRegionBalanceFix(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.loadZoneWaterBalanceFixData();
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ID: null,
        tenantId: null,
        AreaID: null,
        terminalID: null,
        terminalAddress: null,
        TerminalMark: null,
        caliber: null,
        userName: null,
        meterReading: null,
        easIon: null,
        easIonID: null,
        supplierID: null
      };
      this.resetForm("form");
    },
    handleBalanceMonthChange() {
      this.loadZoneWaterBalanceFixData();
    },
    handleWaterBalanceEdit() {
      this.loadZoneWaterBalanceFixData();
      if (this.editingWaterBalanceFixObj) {
        this.open = true
      }else{
        this.$message.error('该账期数据暂未生成')
      }
    },
    handleCalculateZoneWaterBalanceFix() {
      if (this.editingZoneObj == undefined) {
        this.$message.error('请先选择一个分区再进行此处操作')
      } else {
        doCalculateZoneWaterBalanceFix({paydate: this.balanceMonth, areaID: this.editingZoneObj.areaId}).then(res => {
          this.$modal.msgSuccess("重新运算成功");
          this.loadZoneWaterBalanceFixData();
        })
      }
    },
    getWaterBalanceFixValue(key) {
      return this.editingWaterBalanceFixObj != undefined ? this.editingWaterBalanceFixObj[key] : ''
    },
  }
}
</script>

<style scoped>

</style>
